import React, { Component } from 'react'
import axios from "axios"
import { Button,Table,Space,Pagination,Popconfirm, message,DatePicker} from 'antd'
import moment from 'moment';

import "./Orders.css"
import Update from "./component/Update"
const dateFormat = 'YYYY-MM-DD HH:mm';
export default class Manager extends Component {
  state={
    count:0,
    currPage:1,
    managerList:[],
    updateVisible:false,
    // 设置managerList.role
    role:true,
    list:{},
  }
  // 产品查询模块功能
  componentDidMount(){
    this.getManagerList(1)
  }
  getManagerList=(page)=>{
    // 商品查询列表
    axios.get("/api/payment/order/list",{params:{
      page:page,
      limit:10
    }}).then(res=>{
      if(res.data.code===200){
        // console.log("$",res.data)
        this.setState({
          // 当前页
          currPage:res.data.page.currPage,
          // 总页数
          count:res.data.page.totalCount,
          managerList:res.data.page.list,
        })
        console.log("@",res.data.page.list)
      }
    },   //成功的回调
    error =>{
      console.log(error)
    }) //失败的回调
    
  }
  // 打开添加组件模块
  openAdd=()=>{
    // this.setState({
    //   addVisible:true
    // })
    this.props.history.push("/home/add")
  }
  // 关闭添加组件模块
  closeAdd=()=>{
    const {totalPage} = this.state
    this.setState({
      addVisible:false
    })
    this.getManagerList(totalPage)
  }
  // 打开修改组件模块
  openUpdate =(text)=>{
      return ()=>{
        this.setState({
          updateVisible:true,
          list:text
        })
        console.log(text)
      }
    
  }
  // 关闭修改组件模块
  closeUpdate = ()=>{
    const {currPage} = this.state.managerList
    this.setState({
      updateVisible:false
    })
    this.getManagerList(currPage)
  }
  // 删除方法
  confirm=(record)=>{
    return ()=>{
      const {currPage} = this.state
      const ids = [record.id]
      console.log(record.id);
      axios.post("/api/payment/order/delete",
        ids
      ).then(response => {
        message.success('删除成功！');
        this.getManagerList(currPage)
      },   //成功的回调
      error =>{
        message.error('删除失败！');
      }) //失败的回调
    
    }
  }
  // 取消错误
  cancel=(e)=> {
    message.success('取消删除！');
  }
  // 订单排版核心代码
  render() {
    // 嵌套表单
    const expandedRowRender = (managerList) => {
      const columns = [
        { title: '商品名称', dataIndex: 'pname' },
        { title: '商品数量', dataIndex: 'pnum' },
        {
          title: '商品总价格',
          dataIndex:"ptotalPrice"
        },
        { title: '单位名称', dataIndex: 'punitName'},
        {
          title: '单价',
          dataIndex: 'punitPrice',
        },
      ];
      return <Table columns={columns} rowKey="id" dataSource={managerList.subjoinList} pagination={false}/>;
    };
  
    const columns = [
      { title: '#', dataIndex: 'id'},
      { title: '客户', dataIndex: 'customer'},
      { title: '付款状态', dataIndex: 'paytype'},
      { title: '商家', dataIndex: 'business'},
      { title: '备注', dataIndex: 'creator'},
      { title: '创建时间', dataIndex: 'createtime',render:(dataIndex)=>{
        return (<Space direction="vertical" size={12}>
        <DatePicker showTime={{format:"HH:mm"}} defaultValue={moment(dataIndex, dateFormat)} disabled />
      </Space>)
      }},
      {
        title: '操作',
        render: (text, record) => (
          //fragment
        <Space>
        <Button type='primary' size='small' onClick={this.openUpdate(text)}>修改</Button>
        <Popconfirm
            title="你确认要删除这一条信息嘛？"
            onConfirm={this.confirm(record)}
            onCancel={this.cancel}
            okText="确认"
            cancelText="取消"
            type='primary' size='small'
        >
            <Button style={{color:"red"}}>删除</Button>
        </Popconfirm>
        </Space>
        ),
      },
    ];
   const {list,managerList,count,currPage,updateVisible}=this.state
    return (
      <div>
        <Button type='primary' style={{marginBottom:"20px"}} onClick={this.openAdd}>添加订单</Button>
        
        {/* <Table columns={columns} rowKey="id" dataSource={managerList} bordered size="small" pagination={false} /> */}
        <Table className="components-table-demo-nested" columns={columns} expandable={{ expandedRowRender }} rowKey="id" dataSource={managerList} pagination={false}/>
          {/* total总页数 currPage:当前页 */}
        <Pagination style={{position:"fixed",bottom:"15px"}} hideOnSinglePage={false} defaultPageSize={10} total={count} onChange={this.getManagerList} current={currPage}></Pagination> {/* */}
        <Update key={list.id} list={list} updateVisible={updateVisible} closeUpdate={this.closeUpdate}></Update>
      </div>
    )
  }
}
